<template>
  <div class="main-all">
    <p><i class="el-icon-s-custom"></i>学生管理</p>
    <div class="main">
      <div class="main-1">
        <el-button icon="el-icon-plus" @click="dialogFormVisible = true; ADD()">新建</el-button>
        <div style="display: flex;">
          <el-input style="margin-right: 20px; height: 30px; width: 100px;" v-model="name"
            placeholder="学生姓名"></el-input>
          <el-input style="margin-right: 20px; height: 30px; width: 100px;" v-model="majorName"
            placeholder="专业名"></el-input>
          <el-input style="margin-right: 20px; height: 30px; width: 100px;" v-model="className"
            placeholder="班级名"></el-input>
          <el-button type="primary" @click="getPage" icon="el-icon-search">搜索</el-button>
        </div>
      </div>
      <el-pagination @current-change="fn2" :current-change="page" background layout="prev, pager, next" :total="total"
        style="margin-bottom: 10px;">
        <!--                                          total页码，设定为变量 -->
      </el-pagination>
      <div style="overflow-y: scroll;width: 100%;height: 80%;">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="学生ID">
        </el-table-column>
        <el-table-column prop="number" label="学号">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="className" label="班级">
        </el-table-column>
        <el-table-column prop="majorName" label="专业">
        </el-table-column>
        <el-table-column prop="sex" label="性别">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="dialogFormVisible = true; changed(scope.row)">编辑</el-button>
            <el-button type="text" @click=" deletes(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!--  -->


      <el-dialog width="35%" title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form" :label-width="formLabelWidth">
          <el-form-item label="姓名">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="form.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属班级">
            <el-select style="width: 100%;" v-model="form.class" placeholder="请选择系">
              <el-option v-for="(item, index) in tableDataAll" :key="index" :label="item.name"
                :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱" :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-col :span="20">
              <el-date-picker style="width: 100%;" type="date" placeholder="选择日期"
                v-model="form.birthday"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="性别" v-model="form">
            <el-radio v-model="form.sex" :label="1">男</el-radio>
            <el-radio v-model="form.sex" :label="0">女</el-radio>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false; ADDorChange()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>


</template>

<script>
import serve from '../api/index.js'
import { getPages, getList, ADDList, changeorno, deleted, getListAll, getStudent } from '../api/student.js'
export default {
  data() {
    return {
      name: '',
      majorName: '',
      className: '',
      // 搜索三人组
      total: 100,
      // 页码算数
      page: 1,
      // 页数
      tableData: [],
      // 学生管理的res回复
      tableDataAll: [],
      // 班级管理的res回复
      add: '',
      dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',       //姓名
        number: '',     //学号
        class: '',      //所属班级
        classId: '',    //班级ID
        password: '',   //密码
        email: '',      //邮箱
        birthday: '',   //生日
        sex: 1   ,      //性别
        ID:''           //ID
      },
      formLabelWidth: '70px'
    }
  },
  methods: {
    getPage() {
      getPages(this.name, this.majorName, this.className).then((res) => {
        console.log(res.data);
        this.total = res.data * 10
        if (res.message == 'success') {
          getList(this.page, this.name, this.majorName, this.className).then((res) => {
            console.log(res);

            this.tableData = res.data
            console.log(this.tableData, '学生');
          })
          getListAll().then((res) => {

            this.tableDataAll = res.data
            console.log(this.tableDataAll, '班级');
          })

        }

      })
    },//获取列表数据
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },//element
    fn2(val) {
      this.page = `${val}`
      console.log(this.page);
      this.getPage()
    },//获取页数
    fn() {
      // 获取 classId
      this.tableDataAll.filter((item) => {
        if (item.name == this.form.class) {
          this.form.classId = item.id
          console.log(item, 'classId');
        }
      })
      console.log(this.form.classId, 'classId');

    },
    ADD() {
      this.form = {
        name: '',     //班级名
        grade: '2019',    //年级
        majorName: '' //所属专业
      },
        this.OR = 'ADD'
      console.log(this.form);
    },//添加列表数据  


    changed(e) {
      this.OR = 'changed'
      console.log(e, 'e');
      getStudent(e.id).then(res => {
        console.log(res);
        this.form.name = res.data.name,
          this.form.number = res.data.number,
          this.form.class = e.className,
          this.form.password = res.data.password,
          this.form.email = res.data.email,
          this.form.birthday = res.data.birthday,
          this.form.sex = res.data.sex,
          this.form.ID = res.data.id
      })
    }, //修改列表数据

    ADDorChange() {
      if (this.OR == 'ADD') {
        this.fn()
        ADDList(this.form.name, this.form.number, this.form.classId, this.form.password, this.form.email, this.form.birthday, this.form.sex).then((res) => {
          console.log(res);
          this.getPage()
        })
      } else if (this.OR == 'changed') {
        this.fn()
        changeorno(this.form.name, this.form.number, this.form.classId, this.form.password, this.form.email, this.form.birthday, this.form.sex,this.form.ID).then((res) => {
          console.log(res);
          this.getPage()
        })
      }
    },

    deletes(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleted(id).then((res) => {
          console.log(res);
        })
        this.getPage()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      }); //删除列表数据   xxxx未完成

    }

  },
  mounted() {
    this.getPage()  //初始化列表数据
  }
}

</script>

<style scoped>
.el-table {
  width: 100% !important;
}

.main {
  .el-button {
    height: 40px;
  }

  .main-1 {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: space-between;
  }


}
</style>
